<template>
    <view class="tabbar">
        <view v-for="(tabbar, index) in tabList" :key="index" @click="switchTab(tabbar.pagePath)">
            <view class="tab-item" :class="currentPage===tabbar.pagePath ? 'selected' : 'unselected'">
                <i class="custom-icon"
                   :class="currentPage === tabbar.pagePath ? tabbar.selectedIconPath : tabbar.iconPath"
                ></i>
                <!--                <text class="tab-text">{{ tabbar.text }}</text>-->
            </view>
        </view>
    </view>
</template>

<script>
import {EventBus} from '@/eventBus.js';

export default {
    data() {
        return {
            currentPage: '', // 当前页面路径
            tabList: [
                // ... 你的tab项数组
                {
                    pagePath: "pages/index/index",
                    iconPath: "custom-icon-shouye",
                    selectedIconPath: "custom-icon-shouye",
                    text: "首页"
                },
                {
                    pagePath: "pages/shop/shop",
                    iconPath: "custom-icon-gouwuche",
                    selectedIconPath: "custom-icon-gouwuche",
                    text: "商城"
                },
                {

                    pagePath: "pages/recharge/recharge",
                    iconPath: "custom-icon-qianbao",
                    selectedIconPath: "custom-icon-qianbao",
                    text: "充值"
                },
                // {
                //     pagePath: "pages/welfare/welfare",
                //     iconPath: "custom-icon-favorites",
                //     selectedIconPath: "custom-icon-favorites-fill",
                //     text: "福利"
                // },
                {
                    pagePath: "pages/my/my",
                    iconPath: "custom-icon-customer",
                    selectedIconPath: "custom-icon-customer-fill",
                    text: "我的"
                }
            ]
        };
    },
    created() {
        this.currentPage = getCurrentPages()[getCurrentPages().length - 1].route;
    },
    methods: {
        switchTab(pagePath) {
            // 判断是否登录
            const token = this.$store.getters.getToken ? this.$store.getters.getToken : null;
            if (!token) {
                EventBus.$emit('call-loginOpen');
                return;
            }
            // 获取当前页面路由
            this.currentPage = getCurrentPages()[getCurrentPages().length - 1].route;
            // 切换页面的逻辑
            if (this.currentPage !== pagePath) {
                // uni.redirectTo({
                //     url: pagePath,
                // })
                this.$u.route({
                    url: pagePath,
                    type: 'redirectTo'
                });
                this.currentPage = pagePath;
            }
        }
    }
};
</script>

<style scoped lang="scss">
@import "static/css/global.scss";

.tabbar {
    // 至于最上层
    z-index: 999;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 120rpx;
    background-color: #0f0e2d;
    color: #ffff;
    position: fixed;
    max-width: 400px;
    margin: auto;
    bottom: 0;
    left: 0;
    right: 0;


    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 120rpx;


        i.custom-icon {
            font-size: 50rpx;

        }


        .tab-text {
            font-size: 30rpx;
            margin-top: 10rpx;
        }

    }

}

.selected {
    color: #00eaff;
    border-bottom: #00eaff 2px solid;
}

.unselected {
    color: #ffffff;
}

</style>
